<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>张志福-小米帐号-注册</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				color: #333333;
				/*border: 1px solid;*/
			}
			
			body {
				font-size: 14px;
				background-color: #F9F9F9;
				font-family: arial, "Hiragino Sans GB", "Microsoft YaHei", "微軟正黑體", "儷黑 Pro", sans-serif;
			}
			
			.wrap {
				width: 854px;
				margin: 0 auto;
				background-color: white;
				height: 100%;
				padding-bottom: 60px;
			}
			
			.logo {
				height: 48px;
				text-align: center;
				margin-bottom: 40px;
			}
			
			.title {
				font-size: 30px;
				color: #333333;
				height: 45px;
				line-height: 45px;
				text-align: center;
			}
			
			.main {
				width: 332px;
				padding-top: 30px;
				margin: 0 auto;
			}
			
			.main p {
				line-height: 32px;
			}
			
			#select1-1 {
				height: 40px;
				width: 330px;
				border: 1px solid #E0E0E0;
				line-height: 40px;
				text-indent: 1em;
				cursor: pointer;
				position: relative;
			}
			
			#select1-2 {
				height: 40px;
				width: 40px;
				border-left: 1px solid #E0E0E0;
				position: absolute;
				left: 288px;
				top: 0;
				background-image: url(img/2017-08-11_101957.png);
				background-repeat: no-repeat;
				background-position: center;
			}
			
			#phone {
				border: 1px solid #E0E0E0;
				margin-bottom: 9px;
			}
			
			#quhao {
				display: inline-block;
				height: 40px;
				width: 72px;
				line-height: 40px;
				text-indent: 1em;
				border-right: 1px solid #E0E0E0;
				cursor: pointer;
			}
			
			#phonenumber {
				height: 40px;
				width: 247px;
				border: 0;
				outline: none;
				padding-left: 6px;
			}
			
			#yzm {
				width: 192px;
				height: 40px;
				outline: none;
				padding-left: 10px;
				border: 1px solid #E0E0E0;
			}
			
			.yzm1 {
				height: 40px;
				line-height: 40px;
			}
			
			#btn {
				display: block;
				height: 42px;
				width: 332px;
				border: 1px solid #EA8038;
				background-color: #EF6700;
				outline: none;
				color: white;
				margin-top: 32px;
				cursor: pointer;
				margin-bottom: 10px;
			}
			
			#btn:hover {
				background-color: #FF936A;
				border: 1px solid #EA9F82;
			}
			
			.main a {
				color: black;
				font-weight: bold;
				text-decoration: none;
			}
			
			.foot {
				height: 148px;
				width: 854px;
				margin: 0 auto;
				/*border: 1px solid;*/
				overflow: hidden;
			}
			
			.foot1 {
				width: 300px;
				height: 40px;
				margin: 0 auto;
				/*border: 1px solid;*/
				margin-top: 56px;
			}
			
			.foot1 li {
				float: left;
				list-style: none;
				line-height: 40px;
			}
			
			.foot1 ul {
				margin-left: 3em;
			}
			
			.foot1 span {
				padding: 0 12px;
				color: #818181;
			}
			
			.foot1 li a {
				text-decoration: none;
				color: #818181;
			}
			
			.foot2 {
				height: 29px;
				width: 600px;
				margin: 0 auto;
				color: #818181;
				text-align: center;
			}
			
			#select1,
			#phone {
				position: relative;
			}
			
			#selectcountry {
				position: absolute;
				top: 42px;
				background-color: white;
				height: 268px;
				overflow: auto;
				width: 332px;
				text-indent: 0.5em;
				border-left: 1px solid #E0E0E0;
				display: none;
				z-index: 1;
			}
			
			#selectcountry dd,
			#selectquhao dd {
				line-height: 39px;
				border-bottom: 1px solid #E0E0E0;
				cursor: pointer;
			}
			
			#selectcountry dd:hover {
				background-color: #EAEAEA;
			}
			
			#selectquhao dd:hover {
				background-color: #EAEAEA;
			}
			
			#selectcountry dt,
			#selectquhao dt {
				height: 30px;
				background-color: #FCDECC;
				line-height: 30px;
				margin: 6px 0;
			}
			
			#selectquhao {
				position: absolute;
				top: 42px;
				left: -1px;
				background-color: white;
				height: 268px;
				overflow: auto;
				width: 332px;
				text-indent: 0.5em;
				border-left: 1px solid #E0E0E0;
				display: none;
			}
			
			#selectquhao span {
				display: inline-block;
				position: absolute;
				left: 80%;
				width: 4em;
				text-align: right;
				color: #9D9D9D;
			}
			
			.warn {
				font-size: 14px;
				color: #EF6700;
				line-height: 26px;
				text-align: left;
				display: none;
			}
			
			.sp5 {
				display: inline-block;
				color: white;
				width: 14px;
				height: 14px;
				background-color: #EF6700;
				text-align: center;
				border-radius: 50%;
				line-height: 14px;
			}
			
			.warn2 {
				font-size: 14px;
				color: #EF6700;
				line-height: 26px;
				text-align: left;
				display: none;
			}
		</style>
	</head>

	<body>
		<div class="wrap">
			<div class="logo">
				<img src="img/milogo.png" />
			</div>
			<div class="title">
				<p>注册小米帐号</p>
			</div>
			<div class="main">
				<form id="form1">
					<p>国家/地区</p>
					<div id="select1" onclick="XianShi()">
						<div id="select1-1">
							<span>中国</span>
							<div id="select1-2">

							</div>
						</div>
						<div id="selectcountry">
							<dl>
								<dt>常用</dt>
								<dd data-index="0">中国</dd>
								<dd data-index="1">中国台湾</dd>
								<dd data-index="2">中国香港</dd>
								<dd data-index="3">Brazil</dd>
								<dd data-index="4">India</dd>
								<dd data-index="5">Indonesia</dd>
								<dd data-index="6">Malaysia</dd>
								<dt>A</dt>
							</dl>
						</div>
					</div>
					<p>成功注册帐号后，国家/地区将不能被修改</p>
					<p>手机号码</p>
					<div id="phone">
						<span id="quhao" onclick="XianShi2()">
						<span>+86</span><img src="img/2017-08-11_104136.png" />
						</span>
						<input type="text" id="phonenumber" name="phone" value="" placeholder="请输入手机号码" onblur="warning(this)" />
						<div id="selectquhao">
							<dl>
								<dt>常用</dt>
								<dd data-index="0">中国<span>+86</span></dd>
								<dd data-index="1">中国台湾<span>+886</span></dd>
								<dd data-index="2">中国香港<span>+852</span></dd>
								<dd data-index="3">Brazil<span>+55</span></dd>
								<dd data-index="4">India<span>+91</span></dd>
								<dd data-index="5">Indonesia<span>+62</span></dd>
								<dd data-index="6">Malaysia<span>+60</span></dd>
								<dt>A</dt>
							</dl>
						</div>
					</div>
					<p class="warn"><span class="sp5">!</span> 请输入手机号码</p>
                                                                          <!--
                                                                          	作者：757665095@qq.com
                                                                          	时间：2017-08-11
                                                                          	描述：children[5]
                                                                          -->
					<p class="warn"><span class="sp5">!</span> 手机号码格式错误</p>
					<p>图形验证码</p>
					<div class="yzm1">
						<input type="text" name="yzm" id="yzm" value="" placeholder="图片验证码" onblur="warning2(this)"/>验证码
						<p class="warn2"><span class="sp5">!</span> 请输入图片验证码</p>
					</div>
					<input type="button" id="btn" value="立即注册" onclick="TiJiao()"/>
				</form>
				<p style="line-height: 20px;">注册帐号即表示您同意并愿意遵守小米
					<a href="#" title="用户协议">用户协议</a> 和
					<a href="#" title="隐私政策">隐私政策</a>
				</p>
			</div>
		</div>
		<div class="foot">
			<div class="foot1">
				<ul>
					<li>
						<a href="#">简体</a><span>|</span></li>
					<li>
						<a href="#">繁体</a><span>|</span></li>
					<li>
						<a href="#">English</a><span>|</span></li>
					<li>
						<a href="#">常见问题</a>
					</li>
				</ul>
			</div>
			<div class="foot2">
				<p style="color: #818181;">小米公司版权所有-京ICP备10046444-
					<a href="#"><img src="img/ghs.png" /></a>京公网安备11010802020134号-京ICP证110507号</p>
			</div>
		</div>
		<script type="text/javascript">
			var gj = document.getElementById("select1");
			var num = 0;
			var num1 = 0;
			var ph = document.getElementById("phone")

			function XianShi() {
				num = num + 1;
				if(num % 2 == 0) {
					gj.children[1].style.display = "none"
				} else {
					gj.children[1].style.display = "block"
				}
			}

			function XianShi2() {
				num1 = num1 + 1
				if(num1 % 2 == 0) {
					ph.children[2].style.display = "none"
				} else {
					ph.children[2].style.display = "block"
				}
			}
			var dds = document.querySelectorAll("#selectcountry dd")
			var sp = document.getElementById("select1-1").children[0]
			var dds2 = document.querySelectorAll("#selectquhao dd")
			var sp2 = document.getElementById("quhao").children[0]
			for(var i = 0; i < dds.length; i++) {
				dds[i].onclick = function() {
					var inner = this.innerHTML
					sp.innerHTML = inner;
					var index1 = this.getAttribute("data-index")
					for(var k = 0; k < dds2.length; k++) {
						var inner2 = dds2[k].children[0].innerHTML
						var index2 = dds2[k].getAttribute("data-index")
						if(index1 == index2) {
							sp2.innerHTML = inner2
						}
					}
				}
			}
			for(var i = 0; i < dds2.length; i++) {
				dds2[i].onclick = function() {
					var inner = this.children[0].innerHTML
					sp2.innerHTML = inner
					ph.children[2].style.display = "none"
					num1 = num1 + 1
				}
			}
			var form1 = document.getElementById("form1")
			var ph1 =/\d{11}/ 
			var phnum = document.getElementById("phonenumber")
			var yzm = document.getElementById("yzm")
			function warning(t){
				if(t.value.trim()==""){
					form1.children[5].style.display="block"
					form1.children[6].style.display="none"
				}else if(!(ph1.test(t.value))){
					form1.children[6].style.display="block"
					form1.children[5].style.display="none"
				}else{
					form1.children[5].style.display="none"
					form1.children[6].style.display="none"
				}
			}
			function warning2(t){
				if(t.value.trim()==""){
					t.parentNode.children[1].style.display="block"
				}else{
					t.parentNode.children[1].style.display="none"
				}
			}
			function TiJiao(){
				if(phnum.value.trim()==""){
					form1.children[5].style.display="block"
				}else if(!(ph1.test(phnum.value))){
					form1.children[6].style.display="block"
				}else if(yzm.value.trim()==""){
					yzm.parentNode.children[1].style.display="block"
				}else{
					form1.submit();
				}
			}
		</script>
	</body>

</html>